<template>
  <div class="container" style="width: 100%; height: 100%; background: #f3f3f3">
    <van-nav-bar
      title="来料检记录查询"
      fixed
      class="titleStyle"
      left-arrow
      @click-left="onClickLeft"
    >
      <!-- <template #right>
        <van-icon name="search" class="search" @click="showPopup" />
      </template> -->
    </van-nav-bar>
    <!--  搜索条件 -->
    <van-popup
      v-model="showSerch"
      position="top"
      :style="{ paddingTop: '30px' }"
      @close="closeClick"
    >
      <van-cell-group>
        <ul class="searchBox">
          <li>
            <div class="searchLeft">到货单号:</div>
            <div class="searchRight">
              <van-field v-model="search.invoiceNo" />
            </div>
          </li>

          <li>
            <div class="searchLeft">匹配物料名或物料编号:</div>
            <div class="searchRight">
              <van-field v-model="search.keyword" />
            </div>
          </li>
          <li>
            <div class="searchLeft">开始时间:</div>
            <div class="searchRight">
              <van-field
                v-model="search.carryCheckAtStart"
                readonly
                @click="timeChange(1)"
              />
            </div>
          </li>
          <li>
            <div class="searchLeft">结束时间:</div>
            <div class="searchRight">
              <van-field
                v-model="search.carryCheckAtEnd"
                readonly
                @click="timeChange(2)"
              />
            </div>
          </li>
        </ul>
        <div class="btn">
          <van-button type="primary" @click="getListInfo(1)">确定</van-button>
          <!-- <van-button type="primary" @click="resetSearchValue">重置</van-button> -->
        </div>
      </van-cell-group>
    </van-popup>
    <!-- 来料检列表-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已全部加载完成"
        class="van-clearfix"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="contentBox">
          <div v-for="item in list" :key="item.purchaseId" class="listDiv">
            <van-row style="width: 100%; height: 100%">
              <div class="checkList">
                <h1>
                  <span>{{ item.invoiceNo }}</span>
                  <b>收货单号</b>
                </h1>
                <ul>
                  <li>
                    <b>收货日期：</b>
                    <span>{{ item.arrivalDate }}</span>
                  </li>
                  <li>
                    <b>供应商：</b>
                    <span>{{ item.supplier }}</span>
                  </li>
                  <li>
                    <b>物料：</b>
                    <span
                      >{{ item.materialName
                      }}{{
                        item.materialCode !== ""
                          ? "【" + item.materialCode + "】"
                          : ""
                      }}</span
                    >
                  </li>
                  <li>
                    <b>物料图号：</b>
                    <span>{{ item.figureNo }}</span>
                  </li>
                  <li>
                    <b>批次：</b>
                    <span>{{ item.planBatchNo }}</span>
                  </li>
                  <li>
                    <b>送检数量：</b>
                    <span>{{ item.incomingNum }}</span>
                  </li>
                  <li>
                    <b>送检时间：</b>
                    <span>{{ item.carryCheckAt }}</span>
                  </li>
                </ul>
                <div class="checkListBtn">
                  <van-button type="info" @click="InspectionEntry(item)"
                    >查看</van-button
                  >
                </div>
              </div>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <div
      v-show="list.length === 0 && loading === false"
      class="noDataAvailable noDataAvailable3"
    />
    <!--  时间选择 -->
    <van-popup v-model="showTime" position="bottom" :style="{ height: '30%' }">
      <van-calendar
        v-model="showTime"
        type="range"
        :min-date="minDate"
        @confirm="onTimeChange"
        @cancel="cancel"
      />
    </van-popup>
  </div>
</template>
<script>
import { myFunction } from "../../../utils/function";
export default {
  name: "FirstInspection",
  data() {
    return {
      howTime: false,
      num: "",
      show: false,
      title: localStorage.getItem("name"),
      code: localStorage.getItem("code"),
      search: {
        current: 1,
        size: 5,
        status: 2,
        invoiceNo: "",
        keyword: "",
        carryCheckAtStart: "",
        carryCheckAtEnd: "",
      },
      list: [],
      pages: 0,
      total: 0,
      loading: false,
      finished: false,
      isLoading: false,
      showSerch: false,
      showTime: false,
      minDate: new Date(2025, 0, 1),
    };
  },
  created() {
    // this.search.proBatchNo = this.$route.query.code
  },
  mounted() {
    this.getListInfo();
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onTimeChange(date) {
      const [start, end] = date;
      if (this.num === 1) {
        this.search.carryCheckAtStart = myFunction(start).slice(0, 10);
      } else {
        this.search.carryCheckAtEnd = myFunction(start).slice(0, 10);
      }
      this.showTime = false;
    },
    timeChange(num) {
      this.num = num;
      this.showTime = true;
    },
    cancel() {
      this.showTime = false;
    },
    // 搜索条件展示
    showPopup() {
      this.showSerch = true;
    },
    // 搜索弹窗关闭时
    closeClick() {
      this.showSerch = false;
    },
    /* 获取页面数据 */
    async getListInfo(page) {
      if (page) this.search.current = page;
      if (+page === 1) this.list = [];
      this.loading = true;
      const res = await this.$axios.post(
        "/dobo-product/pro/incoming/check/page",
        this.search
      );
      if (res.data.code === 200) {
        this.show = false;
        const list = [];
        res.data.data.list.filter((item) => {
          list.push(item);
        });
        this.list = this.list.concat(list); // 去重 合并
        const hash = {};
        // 数组去重
        this.list = this.list.reduce((preVal, curVal) => {
          /* eslint-disable-next-line */
          hash[curVal.id]
            ? ""
            : (hash[curVal.id] = true && preVal.push(curVal));
          return preVal;
        }, []);
        this.total = res.data.data.total;
        this.loading = false;
        if (+this.list.length === +this.total) {
          this.finished = true;
        }
      }
    },
    //   触底加载
    onLoad() {
      setTimeout(() => {
        if (this.list.length < this.search.current) {
          this.finished = true;
          return;
        }

        if (this.list.length === this.total) {
          this.finished = true;
          return;
        }
        let num;
        num = this.search.current;
        num++;
        this.getListInfo(num);
      }, 1000);
    },
    //  下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.list = [];
        this.total = 0;
        this.finished = false;
        this.getListInfo(1);
        this.isLoading = false;
      }, 500);
    },
    /* 检验录入 */
    InspectionEntry(row) {
      this.$router.push("/incomingCheckInputDetails");
      this.$store.commit("getDate", row);
    },
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang='scss' scoped>
.container {
}
</style>
<style lang='scss'>
</style>
